<template>
  <el-container>
    <el-header :style="{fontsize: '12px'}">基本统计数据</el-header>
    <el-main>
      <el-form @submit.prevent="submitData">
        <el-form-item label="选择列">
          <el-select v-model="selectedColumn" style="width: 240px" placeholder="请选择">
            <!-- 循环遍历所有可能的列名 -->
            <el-option
                v-for="column in columnOptions"
                :key="column"
                :label="column"
                :value="column">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitData">提交</el-button>
        </el-form-item>
      </el-form>
      <!-- 条件渲染，当statistics有数据时显示 -->
      <div v-if="statistics" class="statistics-container">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-card shadow="hover" class="statistic-card">
              <el-statistic title="平均值" :value="formatNumber(statistics.mean, 1)"></el-statistic>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="statistic-card">
              <el-statistic title="中位数" :value="formatNumber(statistics.median, 1)"></el-statistic>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="statistic-card">
              <el-statistic title="标准差" :value="formatNumber(statistics.std_dev, 2)"></el-statistic>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="statistic-card">
              <el-statistic title="方差" :value="formatNumber(statistics.variance, 2)"></el-statistic>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="statistic-card">
              <el-statistic title="最小值" :value="formatNumber(statistics.min, 1)"></el-statistic>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="statistic-card">
              <el-statistic title="最大值" :value="formatNumber(statistics.max, 1)"></el-statistic>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="statistic-card">
              <el-statistic title="全距" :value="formatNumber(statistics.range, 1)"></el-statistic>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card shadow="hover" class="statistic-card">
              <el-statistic title="四分位数" :value="statistics.quartiles.join(', ')"></el-statistic>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
import {ref, computed} from 'vue';
import {useStore} from 'vuex';
import axios from 'axios';
import {ElMessage} from 'element-plus';

const store = useStore();
const selectedColumn = ref(null);
const statistics = ref(null);
const data = computed(() => store.state.tableData);
const columnOptions = computed(() => {
  if (data.value.length > 0) {
    return Object.keys(data.value[0]);
  }
  return [];
});

const submitData = async () => {
  if (!selectedColumn.value) {
    ElMessage.error('请选择一个列');
    return;
  }

  try {
    const payload = {
      column: selectedColumn.value,
      data: store.state.tableData
    };

    const response = await axios.post('http://101.43.68.110:8000/api/stats/', payload);
    statistics.value = response.data;
  } catch (error) {
    ElMessage.error('数据提交失败');
    console.error(error);
  }
};

const props = defineProps({
  statistics: {
    type: Object,
    required: true
  }
});
const formatNumber = (value, decimalPlaces) => {
  return value.toFixed(decimalPlaces);
};
</script>

<style scoped>
.statistics-container {
  margin: 20px;
}
.statistic-card {
  margin-top: 10px; /* 添加上边距 */
  margin-bottom: 10px; /* 添加下边距 */
}


</style>
